import React, { memo, useState } from 'react';
import { PictureWrapper } from './style';
import { useSelector } from 'react-redux';
import PictureBrowser from 'src/base-ui/picture-browser';

const DetailPicture = memo((props) => {
  const [showBrowser, setShowBrowser] = useState(false);

  const detailInfo = useSelector((state) => state.detail.detailInfo);

  function showBrowserBtnClick() {
    setShowBrowser(true);
  }
  return (
    <PictureWrapper>
      <div className="pictures">
        <div className="left">
          <div className="item" onClick={(e) => showBrowserBtnClick()}>
            <img src={detailInfo?.picture_urls[0]} alt="" />
            <div className="cover"></div>
          </div>
        </div>
        <div className="right">
          {detailInfo?.picture_urls?.slice(1, 5).map((item) => (
            <div className="item" key={item} onClick={(e) => showBrowserBtnClick()}>
              <img src={item} alt="" />
              <div className="cover"></div>
            </div>
          ))}
        </div>
      </div>

      <div className="show-btn" onClick={(e) => showBrowserBtnClick()}>
        显示照片
      </div>

      {showBrowser && <PictureBrowser pictures={detailInfo?.picture_urls} closeClick={(e) => setShowBrowser(false)} />}
    </PictureWrapper>
  );
});

export default DetailPicture;
